<template>
  <!-- 表单 -->
    <el-form :inline="true" :model="userInfoForm" class="demo-form-inline">
    <el-form-item label="客户名称">
      <el-input v-model="userInfoForm.name" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="客户标签">
      <el-select
        v-model="userInfoForm.labels"
        placeholder="请选择"
        clearable
      >
        <el-option label="仓储" value="4" />
        <el-option label="青岛" value="3" />
      </el-select>
    </el-form-item>
    <el-form-item label="客户编号">
      
      <el-input v-model="userInfoForm.startNo" placeholder="请输入" clearable style="width: 200px"/>
      <span>~</span>
      <el-input v-model="userInfoForm.endNo" placeholder="请输入" clearable  style="width: 200px"/>
    </el-form-item>
    <el-form-item label="客户状态">
      <el-select
        v-model="userInfoForm.status"
        placeholder="请选择"
        clearable
      >
        <el-option label="未沟通" value="0" />
        <el-option label="有意向" value="1" />
        <el-option label="无意向" value="2" />
        <el-option label="已成交" value="3" />
        <el-option label="信息有误" value="4" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="searchBtn">搜索</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
  <!-- 按钮 -->
  <el-row class="mb-4 btnBox">
    <el-button type="primary" @click=" addClientInfo = !addClientInfo">
      <el-icon><Plus /></el-icon>
      <span>新建</span>
    </el-button>
    <el-button @click="outText">导出</el-button>
    <el-button @click="outModel">模版下载</el-button>
  
    <el-upload
    :show-file-list="false"
    :auto-upload="false"
    :on-change="Info">
    <el-button>
      <el-icon><Upload /></el-icon>
      <span>导入</span>
    </el-button>
  </el-upload>
  </el-row>
  <!-- 表格 -->
  <el-table v-loading="loading" :data="customerInfoForm" style="width: 100%" :cell-style="{textAlign:'center'}" :header-cell-style="{'text-align': 'center',background:'#fafafa',color:'#606266' }">
    <el-table-column type="index" label="序号" width="100" />
    <el-table-column prop="no" label="客户编号" width="200"/>
    <el-table-column prop="name" label="客户名称" />
    <el-table-column prop="labelText" label="客户标签" />
    <el-table-column prop="address" label="地址"/>
    <el-table-column label="状态" prop="status" >
      <template #default="{row}">
        <span v-if="row.status == 0">未沟通</span>
        <span v-if="row.status == 1">有意向</span>
        <span v-if="row.status == 2">无意向</span>
        <span v-if="row.status == 3">已成交</span>
        <span v-if="row.status == 4">信息有误</span>
      </template>
    </el-table-column>
    <el-table-column prop="saleUserId" label="所属销售">
      <template #default="{row}">
         <template v-for="item in SalesP" :key="item.value">
          <span v-if="item.value == row.saleUserId">{{ item.label }}</span>
         </template>
      </template>
    </el-table-column>
    <el-table-column prop="updTime" label="更新时间"/>
    <el-table-column label="操作" width="200px">
      <template #default="{row}">
        <el-button type="primary" link @click="followUpInfo = true">跟进</el-button>
        <el-popconfirm title="你确定要删除吗?" @confirm="del(row.id)">
           <template #reference>
              <el-button type="primary" link>删除</el-button>
          </template>
        </el-popconfirm>
        <el-button type="primary" link  @click="edit(row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      layout="prev, pager, next, jump, sizes"
      :total="total"
      background 
      class="mt-4"
    />
  <!-- 组件---新增 -->
  <el-drawer
    v-model="addClientInfo"
    title="新增"
    direction="rtl"
    size="50%"
  >
  <addANewUser ref="addANewUserRef"/>
  <template #footer>
    <el-button @click="addClientInfo = false">取消</el-button>
    <el-button type="primary" @click="serve">确认</el-button>
  </template>
  </el-drawer>
  <!-- 组件 --- 跟进 -->
  <el-drawer
    v-model="followUpInfo"
    title="跟进"
    direction="rtl"
    size="50%"
  >
  <userFollowUp :userListInfo="userListInfo" ref="followUpRef"/>
  <template #footer>
    <el-button @click=" followUpInfo = false">取消</el-button>
    <el-button type="primary" @click="followRequest">确认</el-button>
  </template>
  </el-drawer>
  <editUser :reload="getCompanyInfo" ref="editRef"/>
</template>

<script setup lang="ts">
defineOptions({
  name: "CustomerInformation",
});
import {ref, onMounted} from "vue"
import { Plus,Upload } from "@element-plus/icons-vue";
import { getCompanyList,addClient,getSaleP,importExcel,followUpReq,getDetail,delReq,exportTask,exportTaskStencil } from "@/api/userInfo"
import { getUserList} from "@/api/followUp"
import addANewUser from "./components/addANewUser.vue"
import editUser from "./components/editUser.vue"
import userFollowUp from "./components/userFollowUp.vue"
import { ElMessage } from 'element-plus'
import moment from 'moment'
const userInfoForm = ref({
  name: "",
  labels: "",
  startNo: "",
  endNo: "",
  status: "",
})
// 发送删除请求
const del = (id:any)=>{
  delReq(id).then((res:any)=>{
    if(res.code === 10000){
      ElMessage({
        type: "success",
        message: res.msg,
        onClose: ()=>{
          getCompanyInfo({})
        }
      })
    }
  })
}
// 拿到跟进的子组件
const followUpRef = ref<any>(null)
const editRef = ref<any>(null)
const loading = ref<boolean>(false)
// 导出
const outText = ()=>{
  exportTask({}).then((res:any)=>{
      if(res.code === 10000){
        ElMessage({
        type: "success",
        message: res.msg,
      })
      }
  })
}
// 导出模版
const outModel = ()=>{
  exportTaskStencil().then((res:any)=>{
    if(res.code === 10000){
      ElMessage({
        type: "success",
        message: res.msg,
      })
    }
  })
}
const followRequest =()=>{
  // 参数
  const data = {...followUpRef.value.userFollowUpAdd}
  data.connectUrls =  data.imgs[0].response.result[0]
  data.followUpTime = moment(data.followUpTime).format("yyyy-MM-DD HH:mm:ss")
  followUpReq(data).then((res:any)=>{
    if(res.code === 10000){
      ElMessage({
        type: "success",
        message: res.msg
      })
    }
  })
}
// 控制跟进组件的
const followUpInfo = ref(false)
// 新增
const addANewUserRef = ref<any>(null)

// 导入
const Info =(uploadFile:any)=>{
  importExcel(uploadFile.raw , 1).then((res:any)=>{
    if(res.code === 10000){
      ElMessage({
        type: "success",
        message: res.msg
      })
    }
  })
}
// 拿到所有用户
let userListInfo:Array<any> = []
const getUser = ()=>{
  getUserList().then((res:any)=>{
    if(res.code === 10000){
      userListInfo = res.result
    }
  })
}

// 拿到销售的人员信息
const SalesP = ref<any>([])
const getSales =()=>{
  getSaleP().then((res:any)=>{
    if(res.code === 10000){
      SalesP.value = res.result    
    }
  })
}

// 点击确认，在父组件中拿到子组件的参数，发送请求
const addClientInfo = ref(false)
const serve = ()=>{
  addClient(addANewUserRef.value.userInfoAddForm).then((res:any)=>{
    if(res.code === 10000){
      ElMessage({
        type: "success",
        message: res.msg,
        onClose: ()=>{
          addClientInfo.value = false
          getCompanyInfo({})
        }
      })
    }
  })
}

//做分页的
const total = ref(0);
const page = ref(1);
const pageSize = ref(10); 

// 搜索
const searchBtn = ()=>{
  getCompanyInfo(userInfoForm.value)
}

// 表单初始化
const customerInfoForm = ref([])
const getCompanyInfo = (val:any)=>{
  loading.value = true
  getCompanyList(val).then((res:any)=>{
    if(res.code === 10000){
      customerInfoForm.value = res.result.records
      loading.value = false
    }
  })
}
const edit = (row:any)=> {
  getDetail(row.id).then((res:any)=>{
    if(res.code === 10000){
      editRef.value.show(res.result)
    }
  
  })
  
}
onMounted(()=>{
  getCompanyInfo({})
  getSales()
  getUser()
})
</script>

<style scoped>
.btnBox{
  margin-top: 15px;
  margin-bottom: 20px;
}
.el-pagination{
  display: flex;
  margin-top: 14px;
  margin-bottom: 14px;
  justify-content: flex-end;
  margin-right: 10px;
}
</style>